<template>
	<view class="container">
	  <view class="userinfo">
		<view class="user_left" >
			<view class="avatar">
			<up-avatar :src="avatarsrc" size="45"></up-avatar>
		 </view>
		 <view class="nickname">
			<up-text :text="nickname" size="14" :bold="true"></up-text>
		 </view>
		</view>
		 <view class="notify" @click="onRecieveOffer">
			<u-badge :isDot="true" type="error" style="position: relative; right: -7px;top: 19px;"></u-badge>
			<up-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        name="bell"
                        :size="30"
						color="#007aff"
						
                ></up-icon>
                <text class="grid-text">收到报价</text>
		 </view>
	  </view>
	  <view class="mytradeinfo">
		<up-grid
                :border="true"
                col="3"
				@click="click"
        >
            <up-grid-item
                    v-for="(listItem,listIndex) in list"
                    :key="listIndex"
				    
            >
                <up-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="listItem.name"
                        :size="28"
						color="#007aff"
						
                ></up-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </up-grid-item>
        </up-grid>
	  </view>
	  <view class="setting"></view>
	  <view class="plus"></view>
	</view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/models/menbers';
import { http } from '@/utils/http';
import type { ResUserProfileData } from '@/utils/page_types';
import { onLoad } from '@dcloudio/uni-app';
import { ref,reactive, onMounted } from 'vue';
const avatarsrc =  ref('https://uview-plus.jiangruyi.com/h5/static/uview/album/3.jpg')
const nickname = ref('轻舞飞扬')
const userStore = useMemberStore()
const loadProfile = async ()=>{
	const data = await http<ResUserProfileData>({
		url:"/user",
		data:{
			openId:userStore.profile?.openid
		},
		method:"GET"
	 });

	 nickname.value = data.data.NickName;
	 avatarsrc.value =data.data.Avatar;
	 userStore.profile!.avatar = data.data.Avatar;
	 userStore.profile!.nickName = data.data.NickName;
     userStore.profile!.brand =data.data.Brand;
	
	 
}

onMounted(()=>{
	console.log("onMouted")
	loadProfile()
 }) 
// 创建响应式数据  
const list = reactive([  
    {  
        name: 'red-packet',  
        title: '我的出售'  
    },  
    {  
        name: 'coupon',  
        title: '我的求购'  
    },  
    {  
        name: 'server-man',  
        title: '问题反馈'  
    },  
    {  
        name: 'setting',  
        title: '我的品牌'  
    },  
    {  
        name: 'chat',  
        title: '我的报价'  
    },  
    {  
        name: 'volume', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name  
        title: '发布信息'  
    },  
]);  
  
const onRecieveOffer=()=>{
    console.log("onRecieveOffer")
	uni.navigateTo({
					url:'recieveoffer'
				})
}
  
// 定义方法  
const click = (name) => {  
		console.log("index",name)
		switch(name){
			case 5:
				if(!userStore.profile!.brand){
					uni.navigateTo({
					url:'mybrand'
				})
				}else{
					uni.navigateTo({
					url:'addinfo'
				})
				}
				
				break;
				case 3:
				uni.navigateTo({
					url:'mybrand'
				})
				break;
				case 0:
				uni.navigateTo({
					url:'mysell'
				})
				break;
				case 1:
				uni.navigateTo({
					url:'mybuy'
				})
				break;
				case 2:
				uni.navigateTo({
					url:'myfeedback'
				})
				break;
				case 4:
				uni.navigateTo({
					url:'myoffer'
				})
				break;
		}
    
};  
</script>

<style lang="scss" scoped>
 page{
		background-color: #f6f6f6;
	}
.container {
	display: flex;
	flex-direction: column;
}
.userinfo{
	display: flex;
	background-color: white;
	border-radius: 6px;
	align-items: center;
	height: 80px;
	justify-content: space-between;
}
.avatar{
	margin-left: 10px;
	margin-right: 10px;
}
.mytradeinfo{
	margin-top: 8px;
	border-radius: 6px;
	background-color: white;
	height: 130px;
	padding-top: 13px;
	
}
.grid-text{
	font-size: 14px;
}
.notify{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 16px;
}
.user_left{
	display: flex;
	flex-direction: column;
	margin-left: 16px;
	align-items: center;
}
</style>
